<template>
    <div class="details banxin">
      <!-- 面包屑 -->
      <ul class="bread">
        <li @click="$router.push('/')" :class="{'active': $route.path === '/home' || $route.path === '/'}">首页 <i>/</i> </li>
        <li @click="$router.push('/goods')" :class="{'active': $route.path === '/goods' }">全部商品 <i>/</i> </li>
        <li class="active">商品详情</li>
      </ul>
  
      <div class="content tanxin">
        <main class="tanxin">
          <div class="main_l">
            <div class="bigImg">
              <img
                width="100%"
                height="460px"
                :src="'https://sc.wolfcode.cn' + productInfo.coverImg"
                alt=""
              />
            </div>
            <ul class="smallImg tanxin">
              <li
                @click="sClick(index, item.src)"
                :class="productActive === index ? 'active' : ''"
                v-for="(item, index) in productInfo.imgAltas"
                :key="index"
              >
                <img
                  width="100%"
                  :src="'https://sc.wolfcode.cn' + item.src"
                  alt=""
                />
              </li>
            </ul>
          </div>
          <div class="main_r">
            <h2>{{ productInfo.seriesTitle }}</h2>
            <p>{{ productInfo.seriesSubTitle }}</p>
            <section>{{ productInfo.coin }}<img width="20px" src="../assets/images/home/monad.png" alt=""></section>
            <div v-for="(item, index) in productInfo.parameterJson" :key="index">
              <h3>{{ item.title }}</h3>
              <ul>
                <li
                  @click="btnClick(item.id)"
                  v-for="item in item.parameters"
                  :key="item.id"
                  :class="btnActive === item.currentActivate || btnActive === item.id ? 'active' : '' "
                >
                  {{ item.title }}
                </li>
              </ul>
            </div>
            <h3>数量<span>*礼品库存{{ productInfo.stock }}</span></h3>
              <div class="stepper tanxin">
              <div class="btn" @click="cutFn">-</div>
              <input type="text" v-model="total" disabled />
              <div class="btn" @click="addFn">+</div>
            </div>
            <div class="btns">
              <div @click="addToCartFn">加入购物车</div>
              <div class="buynow" @click="buyClick">立即购买</div>
            </div>
          </div>
        </main>
  
        <div class="aside">
            <h3>您还可以兑换</h3>
            <ul>
              <li v-for="item in themYouCanBuy" :key="item.id" class="tanxin"      @click="$router.push(`/details/${item.id}`)">
                <img :src="'http://sc.wolfcode.cn' + item.img" alt="" />
                <section class="tanxin">
                  <div class="title ellipsis">{{ item.name }}</div>
                  <div class="jifen tanxin">
                    {{ item.coin }}
                    <img src="../assets/images/home/monad.png" alt="" />
                  </div>
                </section>
              </li>
            </ul>
          </div>
        </div>
  
      <div class="about">
        <ul class="tab tanxin">
          <li @click="tabActive = 1" :class="{'active': tabActive===1}">商品详情</li>
          <li @click="tabActive = 2" :class="{'active': tabActive===2}">常见问题</li>
        </ul>
        <div v-html="productInfo.description" :style="{display: tabActive == 1 ? 'block' : 'none'}"></div>
        <div class="issue" :style="{display: tabActive == 2 ? 'block' : 'none'}">
          <h4>兑换后运费如何收取？</h4>
          <p>商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。</p>
          <p>（注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）</p>
      
          <h4>如何申请退换货？</h4>
          <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
          <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
          <p>因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；</p>
          <p>如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；</p>
          <p>如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。</p>
      
          <h4>如何开具发票？</h4>
          <p>叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。</p>
      
          <h4>关于鸡腿价格问题</h4>
          <p>因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。</p>
      
          <h4>联系我们</h4>
          <a href="https://www.wolfcode.cn/">www.wolfcode.cn</a>
          <p>微信公众号搜索“叩丁狼”</p>
      
        </div>
      </div>
    </div>
  </template>
  
  <script>
import { GoodsDetailsApi, CartAddApi } from "@/request/api";
  export default {
    data() {
      return {
        // 小图的当前项
        productActive: 0,
        // 按钮样式
        btnActive: true,
        // 产品信息
        productInfo: {
          coverImg: "",
          description: "",
        },
        // 兑换更多产品信息
        themYouCanBuy: [],
        // 商品数量
        total: 1,
        tabActive: 1,
      };
    },
    // 事件监听，网页才能跳转
    watch: {
      "$route.params.id": {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
          if (newVal != oldVal) {
            this.$router.go(0);
          }
        }
      }
    },
    methods: {
      //  点击了小图 大图跟着变化
      sClick(index, src) {
        this.productActive = index;
        this.productInfo.coverImg = src;
      },
      // 按钮样式变化
      btnClick(id) {
        this.btnActive = id
      },
      // 立即购买
      buyClick() {
        let obj = {content: "无法立即购买！", icon: "danger"}
        this.$store.dispatch("AsyncToast",obj);
      },
      // 添加购物车功能
      // 添加到购物车功能
      addToCartFn() {
        CartAddApi({
          productId: this.$route.params.id,
          total: this.total,
        }).then((res) => {
          // console.log(res);
          if(res.data.code === 0){
            let obj = {content: "已添加到购物车！", icon: "success"}
            this.$store.dispatch("AsyncToast",obj);
          }else{
            let obj = {content: res.data.message, icon: "info"}
            this.$store.dispatch("AsyncToast",obj);
          }
        })
      },
      // 增加数量
      addFn() {
        if (this.total >= this.productInfo.stock) {
          return;
        }
        this.total++;
      },
      // 减少数量
      cutFn() {
        if (this.total <= 1) {
          return;
        }
        this.total--;
      },
    },
    created() {
      // console.log(this.$route.params.id);
      let myid = this.$route.params;
      GoodsDetailsApi(myid).then((res) => {
      //   console.log(res);
        if (res.data.code === 0) {
          let { productInfo } = res.data.data;
          let { themYouCanBuy } = res.data.data;
          this.productInfo = productInfo;
          this.themYouCanBuy = themYouCanBuy;
          this.productInfo.coverImg = productInfo.imgAltas[0].src;
          console.log(this.productInfo);
          console.log(this.themYouCanBuy);
          //修改商品详情
          this.productInfo.description = productInfo.description.replace(/<img src="/g, '<img src="http://sc.wolfcode.cn/')
          // this.productInfo.description = productInfo.description.replace(/upload\/images\//g,"https://sc.wolfcode.cn/upload/images/");
        }
      });
    },
  };
  </script>
   
  <style lang = "less" scoped>
  @import "../assets/base.less";
  
  .bread {
    color: #999999;
    display: flex;
    margin-top: 60px;
    margin-bottom: 20px;
    li {
      font-size: 16px;
      cursor: pointer;
      i {
          margin-right: 6px;
      }
      &.active{
          font-weight: bold;
          color: #000;
      }
    }
  }
  .content {
    min-height: 560px;
    margin-bottom: 40px;
    main {
      width: 970px;
      border-right: 3px solid #ccc;
      box-sizing: border-box;
      padding-right: 29px;
      .main_l {
        width: 459px;
        margin-right: 32px;
        .bigImg {
          width: 459px;
          height: 460px;
          margin-bottom: 21px;
          img {
            display: block;
          }
        }
        .smallImg {
          width: 459px;
          li {
            width: 100px;
            height: 100px;
            opacity: 0.6;
            box-sizing: border-box;
            &.active {
              opacity: 1;
              border: 2px solid red;
            }
          }
        }
      }
      .main_r {
        flex: 1;
        h2 {
          font-size: 28px;
          color: #000;
        }
        p {
          margin-top: 15px;
          font-size: 14px;
          color: #999;
          line-height: 1.2;
          margin-bottom: 26px;
        }
        section {
          font-size: 28px;
          font-weight: bold;
          color: #fd604d;
          padding-bottom: 23px;
          border-bottom: 1px solid #ccc;
        }
        h3 {
          margin-top: 19px;
          margin-bottom: 14px;
          font-size: 16px;
          color: #000;
          font-weight: bold;
          span {
            color: #ccc;
          }
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            height: 32px;
            border: 1px solid #d1d1d1;
            color: #666;
            line-height: 32px;
            padding: 0 17px;
            cursor: pointer;
            margin-right: 20px;
            margin-bottom: 11px;
            &.active {
              color: @blue;
              border-color: @blue;
            }
          }
        }
        .stepper {
          background: #fff;
          width: 105px;
          .btn {
            width: 30px;
            height: 32px;
            border: 1px solid #d1d1d1;
            text-align: center;
            box-sizing: border-box;
            line-height: 32px;
            color: #ccc;
            cursor: pointer;
          }
          input {
            width: 45px;
            border: 0;
            box-sizing: border-box;
            text-align: center;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
          }
        }
        .btns {
          display: flex;
          margin-top: 24px;
          div {
            width: 150px;
            height: 46px;
            background: #3dc36d;
            font-size: 18px;
            color: #fff;
            line-height: 46px;
            text-align: center;
            cursor: pointer;
            margin-right: 19px;
            &.buynow {
              background: @orange;
            }
          }
        }
      }
    }
    .aside {
      flex: 1;
      padding-left: 20px;
      box-sizing: border-box;
      h3 {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 20px;
      }
      ul {
        li {
          cursor: pointer;
          margin-bottom: 30px;
          img {
            width: 80px;
            border: 1px solid transparent;
          }
          section {
            width: 110px;
            justify-content:space-around;
            flex-direction: column;
            .title {
              color: #666666;
              font-family: SourceHanSansSC;
            }
            .jifen {
              color: @orange;
              font-size:20px;
              font-weight: 600;
              justify-content: flex-start;
              align-items: center;
              img{
                width: 30px;
                margin-left: 20px;
              }
            }
          }
        }
      }
    }
  }

  .about {
  border-top: 2px solid #ececec;
  margin-bottom: 40px;
  .tab {
    height: 50px;
    justify-content: start;
    li {
      cursor: pointer;
      line-height: 50px;
      box-sizing: border-box;
      align-items: center;
      padding: 0 21px;
      font-size: 20px;
      color: #333333;
      font-weight: bold;
      &.active {
        background-color: @blue;
        color: #fff;
        font-weight: bold;
      }
    }
  }
  .issue {
  padding-bottom: 20px;
    h4 {
      font-size: 20px;
      font-weight: bold;
      margin: 10px 0;
      margin-top: 40px;
    }
    p {
      line-height: 2;
    }
  }
}
</style>